<template>
  <view>
    <!--    轮播图-->
    <u-swiper
        :list="bannerList"
        :circular="true"
        key-name="url"
        @change="e => currentNum = e.current"
        :autoplay="false"
        :height="280"
        img-mode="aspectFit"
        indicatorStyle="right: 20px">
      <view slot="indicator" class="flex justify-center indicator-num">
        <text class="indicator-num__text">{{ currentNum + 1 }}/{{ bannerList.length }}</text>
      </view>
    </u-swiper>
    <!--    内容 -->
    <view class="p-2 bg-white">
      <!--      第一种展示文字-->
      <view class="flex flex-column" v-show="showType === 0 ">
        <view class="flex align-end text-danger">
          <text class="font-lg font-weight-bold">88</text>
          <text class="font-sm" style="padding-bottom: 2px;">元/台起</text>
        </view>
        <text class="font-lg font-weight-bold py-2">洗衣机维修</text>
        <text class="font-sm text-muted">洗衣机不进水/不存水/不脱水/开机跳闸等故障上门检测维修</text>
      </view>
      <!--      第二种展示方式-->
      <scroll-view v-show="showType === 1" :scroll-x="true" style="white-space: nowrap;width: 100%">
        <view class="flex">
          <view class="position-relative bg-light border rounded-lg p-3 flex flex-column mr-3"
                :class="{ 'border-active' : shopTypeIndex === index }" v-for="(item, index) in shopTypeList"
                :key="index" @click="changeShopType(index)">
            <image v-show="shopTypeIndex === index" class="position-absolute bottom-0" style="right: -1px;width: 15px;height: 15px;"
                   src="/static/shop-img/img.png"></image>
            <text class="font" :class="{ 'font-weight-bold' : shopTypeIndex === index }">{{ item.title }}</text>
            <view class="flex align-end text-danger">
              <text class="font-lg font-weight-bold">{{ item.price }}</text>
              <text class="font-sm" style="padding-bottom: 2px;">元/{{ item.type }}起</text>
            </view>
          </view>
        </view>
      </scroll-view>
      <!--      第三种展示方式-->
      <view class="flex flex-column" v-show="showType === 2">
        <text class="font font-weight-bold">请选择您需要的服务</text>
        <view class="flex flex-wrap mt-3">
          <view style="width: 20%" class="position-relative bg-light border rounded-lg p-3 flex flex-column mr-3 mb-3"
                :class="{ 'border-active' : shopTypeIndex === index }" v-for="(item, index) in shopTypeList"
                :key="index" @click="changeShopType(index)">
            <image v-show="shopTypeIndex === index" class="position-absolute bottom-0" style="right: -2px;width: 15px;height: 15px;"
                   src="/static/shop-img/img.png"></image>
            <text class="font" :class="{ 'font-weight-bold' : shopTypeIndex === index }">{{ item.title }}</text>
          </view>
        </view>
        <view class="flex justify-between align-center">
          <view class="font-sm text-danger">
            ￥<text class="font-lg">{{ shopTypeList[shopTypeIndex].price }}</text>/{{ shopTypeList[shopTypeIndex].type }}起
          </view>
          <view class="font-sm text-muted">
            成交<text class="pl-1 text-black">{{ shopTypeList[shopTypeIndex].overOrderNumber }}单</text>
          </view>
        </view>
      </view>
      <!--      第四种展示方式-->
      <view class="flex flex-column" v-show="showType === 3">
        <view class="flex justify-between align-center">
          <view class="font-sm text-danger">
            ￥<text class="font-gg">{{ shopTypeList[shopTypeIndex].price }}</text>/{{ shopTypeList[shopTypeIndex].type }}
          </view>
        </view>
        <view class="flex flex-wrap mt-3">
          <view style="width: 20%" class="position-relative bg-light border rounded-lg p-3 flex flex-column mr-3 mb-3"
                :class="{ 'border-active' : shopTypeIndex === index }" v-for="(item, index) in shopTypeList"
                :key="index" @click="changeShopType(index)">
            <image v-show="shopTypeIndex === index" class="position-absolute bottom-0" style="right: -2px;width: 15px;height: 15px;"
                   src="/static/shop-img/img.png"></image>
            <text class="font" :class="{ 'font-weight-bold' : shopTypeIndex === index }">{{ item.title }}</text>
          </view>
        </view>

      </view>

      <!--        保障-->
      <view v-show="showType !== 2 && showType !== 3" class="flex mt-3">
        <text class="font font-weight-bold">保障</text>
        <view class="flex align-center ml-3">
          <image style="width: 28rpx;height: 28rpx;"
                 src="https://m.zmn.cn/static/mobile/img/details-icon.png"></image>
          <text class="font-sm px-1">保修90天</text>
        </view>
        <view class="flex align-center ml-3">
          <image style="width: 28rpx;height: 28rpx;"
                 src="https://m.zmn.cn/static/mobile/img/details-icon.png"></image>
          <text class="font-sm px-1">快速响应</text>
        </view>
        <view class="flex align-center ml-3">
          <image style="width: 28rpx;height: 28rpx;"
                 src="https://m.zmn.cn/static/mobile/img/details-icon.png"></image>
          <text class="font-sm px-1">计时器报价</text>
        </view>
      </view>
    </view>
    <!--    额外产品-->
    <view v-show="showType !== 3" class="flex flex-column rounded-lg bg-white m-1 p-1 py-4">
      <view class="font font-weight-bold">定期清洗 降低故障率</view>
      <view class="flex flex-column">
        <view class="flex justify-between align-center mt-3">
          <image class="rounded-lg" style="width: 120rpx;height: 120rpx;"
                 src="https://cx-img-oss.zmn.cn/cx-zmn/user/img/20240111/1704964048990.jpg"></image>
          <view class="flex flex-column">
            <text class="font font-weight-bold">滚筒洗衣机清洗（不拆机）</text>
            <text class="font-14 pt-3" style="color: #cba97b">140℃高温蒸汽洗，杜绝看不见的细菌隐</text>
          </view>
          <uni-icons type="right"></uni-icons>
        </view>
        <view class="flex justify-between align-center mt-3">
          <image class="rounded-lg" style="width: 120rpx;height: 120rpx;"
                 src="https://cx-img-oss.zmn.cn/cx-zmn/user/img/20240111/1704964048990.jpg"></image>
          <view class="flex flex-column">
            <text class="font font-weight-bold">滚筒洗衣机清洗（不拆机）</text>
            <text class="font-14 pt-3" style="color: #cba97b">140℃高温蒸汽洗，杜绝看不见的细菌隐</text>
          </view>
          <uni-icons type="right"></uni-icons>
        </view>
        <view class="flex justify-between align-center mt-3">
          <image class="rounded-lg" style="width: 120rpx;height: 120rpx;"
                 src="https://cx-img-oss.zmn.cn/cx-zmn/user/img/20240111/1704964048990.jpg"></image>
          <view class="flex flex-column">
            <text class="font font-weight-bold">滚筒洗衣机清洗（不拆机）</text>
            <text class="font-14 pt-3" style="color: #cba97b">140℃高温蒸汽洗，杜绝看不见的细菌隐</text>
          </view>
          <uni-icons type="right"></uni-icons>
        </view>
      </view>
    </view>
    <!--    用户评价tabs-->
    <view  class="flex flex-column bg-white rounded-lg p-2 m-1">
      <view class="flex justify-between align-start mx-5">
        <view class="font text-muted flex flex-column align-center" :class="{ active : currentServeIndex === index }"
              v-for="(item, index) in serveList" :key="index" @click="changeIndex(index)">
          {{ item }}
          <view class="active-line" v-show="currentServeIndex === index"></view>
        </view>
      </view>
      <view class="mt-5 mx-1 flex flex-column">
        <view class="flex justify-between">
          <view class="flex align-center">
            <view class="line-left rounded-lg"></view>
            <view class="font-weight-bold ml-2">用户评论</view>
          </view>
          <view>
            <text class="font text-muted">全部</text>
            <uni-icons type="right" color="#6c757d"></uni-icons>
          </view>
        </view>
        <!--        评论-->
        <view class="flex flex-column mt-3">
          <!--          评论类型-->
          <view class="flex align-center flex-wrap">
            <view class="border rounded-lg px-2 py-1 mr-2 mb-2" style="background: #f5f5f7">
              <text class="font ">全部 206</text>
            </view>
          </view>
          <!--          用户评论-->
          <scroll-view :scroll-x="true" style="white-space: nowrap;width: 100%;">
            <view class="mr-3" style="display: inline-block;width: 90%">
              <view class="flex flex-column">
                <view class="flex align-center justify-between">
                  <view class="flex align-center">
                    <image style="width: 25px;height: 25px;" class="rounded-circle"
                           src="https://cx-img.zmn.cn/Image/user/42.jpg"></image>
                    <text class="px-2 font-sm">玉箫红</text>
                  </view>
                  <view>11111111</view>
                </view>
                <view class="flex">
                  <text class="font text-muted u-line-2" style="white-space: normal">
                    洗衣机突然不脱水了，想着在电梯里面看到过啄木鸟的广告，于是就联系了维修上门，比预约...
                  </text>
                </view>
                <view class="flex mr-2 flex-wrap">
                  <image style="width: 70px;height: 70px" class="rounded-lg mt-3 mr-1"
                         src="https://cx-img.zmn.cn/Image/user/42.jpg"></image>
                  <image style="width: 70px;height: 70px" class="rounded-lg mt-3 mr-1"
                         src="https://cx-img.zmn.cn/Image/user/42.jpg"></image>
                  <image style="width: 70px;height: 70px" class="rounded-lg mt-3 mr-1"
                         src="https://cx-img.zmn.cn/Image/user/42.jpg"></image>
                  <image style="width: 70px;height: 70px" class="rounded-lg mt-3 mr-1"
                         src="https://cx-img.zmn.cn/Image/user/42.jpg"></image>
                  <image style="width: 70px;height: 70px" class="rounded-lg mt-3 mr-1"
                         src="https://cx-img.zmn.cn/Image/user/42.jpg"></image>
                </view>
              </view>
            </view>
          </scroll-view>
          <!--          服务详情-->
          <view class="flex flex-column mt-3">
            <view class="flex-1">
              <image class="w-100" mode="widthFix"
                     src="https://cx-img-oss.zmn.cn/cx-zmn/user/img/20240111/1704942945695.jpg"></image>
              <image class="w-100" mode="widthFix"
                     src="https://cx-img-oss.zmn.cn/cx-zmn/user/img/20240111/1704942980171.jpg"></image>
            </view>
          </view>
          <!--          收费标准-->
          <view class="my-4 flex align-center">
            <view class="line-left rounded-lg"></view>
            <view class="font-weight-bold ml-2">收费标准</view>
          </view>
          <!--          手风琴效果-->
          <u-collapse accordion :border="false">
            <u-collapse-item :clickable="false" class="mb-3 rounded-lg">
              <text slot="title" class="font font-weight-bold">维修项目</text>
              <view class="flex flex-column">
                <view class="flex justify-between align-center">
                  <text class="font">简单维修</text>
                  <text class="font">88~158元/台</text>
                </view>
                <view class="font text-muted mt-1" style="line-height: 1.5">
                  维修门锁、维修水位传感器、维修进水阀、维修牵引 器、维修测速线圈、维修机门卡扣、维修机械程控
                  器、维修门开关、维修防撞开关、维修排水电磁阀 维修定时器、维修皮碗、更换皮带、设备小修、修复 水路堵塞、更换排水管、更换进水管
                </view>
              </view>
            </u-collapse-item>
          </u-collapse>
          <!--          收费说明-->
          <view class="font font-weight-bold">收费说明:</view>
          <view class="font text-muted mt-2">
            工程师上门后，因用户个人原因取消订单，需支付30元
            上门费，房屋业务除外，价格信息仅供参考，具体收费以
            工程师上门检测和用户沟通后报价为准
          </view>
        </view>
      </view>
    </view>
    <!--    占位-->
    <view style="height: 100rpx"></view>
    <!--    商品导航栏-->
    <view v-show="showType !==2 " class="goods-carts">
      <uni-goods-nav :options="options" :button-style="btnStyle" :fill="true" :button-group="buttonGroup"
                     @click="onClick"
                     @buttonClick="buttonClick"/>
    </view>
    <!--    预约导航栏-->
    <view v-show="showType ===2 " class="goods-carts">
      <uni-goods-nav :options="yueOptions" :button-style="btnStyle" :fill="true" :button-group="yueButtonGroup"
                     @click="onClick"
                     @buttonClick="buttonClick"/>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      // 类型展示方式
      showType: 3,
      // 商品类型索引
      shopTypeIndex: 0,
      // 商品售卖类型
      shopTypeList: [
        {
          title: '普通家用灯具安装、维修',
          price: '30',
          type: '次',
          overOrderNumber: 111111
        },
        {
          title: '普通家用灯具安装、维修',
          price: '301',
          type: '次',
          overOrderNumber: 2242424
        },
        {
          title: '普通家用灯具安装、维修',
          price: '3018',
          type: '次',
          overOrderNumber: 42146
        },
        {
          title: '普通家用灯具安装、维修',
          price: '3018',
          type: '次',
          overOrderNumber: 42146
        },
      ],
      current: 0,
      currentNum: 0,
      bannerList: [
        {
          url: 'https://cdn.uviewui.com/uview/resources/video.mp4',
          title: '昨夜星辰昨夜风，画楼西畔桂堂东',
          poster: 'https://cx-img-oss.zmn.cn/cx-zmn/user/img/20240411/1712828921345.jpg'
        }, {
          url: 'https://cdn.uviewui.com/uview/swiper/swiper2.png',
          title: '身无彩凤双飞翼，心有灵犀一点通'
        }, {
          url: 'https://cdn.uviewui.com/uview/swiper/swiper3.png',
          title: '谁念西风独自凉，萧萧黄叶闭疏窗，沉思往事立残阳'
        }],
      btnStyle: {
        fontWeight: 800,
      },
      options: [
        {
          icon: 'chat',
          text: '客服'
        }, {
          icon: 'cart',
          text: '购物车',
          // info: 2
        }
      ],
      buttonGroup: [
        {
          text: '加入购物车',
          backgroundColor: '#edf3fd',
          color: '#2f7ffd'
        },
        {
          text: '立即预约',
          backgroundColor: 'linear-gradient(90deg, #FE6035, #EF1224)',
          color: '#fff'
        }
      ],
      // 只需预约的底部按钮
      yueOptions: [
        {
          icon: 'chat',
          text: '客服'
        }, {
          icon: 'phone',
          text: '电话联系',
          // info: 2
        }
      ],
      yueButtonGroup: [
        {
          text: '立即预约',
          backgroundColor: 'linear-gradient(90deg, #FE6035, #EF1224)',
          color: '#fff'
        }
      ],
      // 用户评论 服务内容 收费标准的 选择索引
      currentServeIndex: 0,
      serveList: [
        '用户评价',
        '服务内容',
        '收费标准',
      ]
    };
  },
  methods: {
    changeIndex(index) {
      if (this.currentServeIndex !== index) return this.currentServeIndex = index
    },
    onClick(e) {
      uni.showToast({
        title: `点击${e.content.text}`,
        icon: 'none'
      })
    },
    buttonClick(e) {
      console.log(e)
      this.options[2].info++
    },
    // 改变商品类型
    changeShopType(index){
      if (this.shopTypeIndex !== index) return this.shopTypeIndex = index
    }
  },
}
</script>

<style lang="scss">
page {
  background: #f3f3f5;
}

/deep/ .uni-video-cover {
  background-color: transparent !important;
}

/deep/ .u-cell {
  background: #edf3fd
}

.goods-carts {
  display: flex;
  flex-direction: column;
  position: fixed;
  left: 0;
  right: 0;
  /* #ifdef H5 */
  left: var(--window-left);
  right: var(--window-right);
  /* #endif */
  bottom: 0;
}


.indicator-num {
  padding: 2px 0;
  background-color: rgba(0, 0, 0, 0.35);
  border-radius: 100px;
  width: 35px;

  &__text {
    color: #FFFFFF;
    font-size: 12px;
  }
}

.line-left {
  border: 2px solid #2f80ff;
  height: 10px;
}

.active {
  color: #2f80ff;
  font-size: 35rpx;
  font-weight: 600;
}

.active-line {
  width: 20px;
  margin-top: 5px;
  border-bottom: 2px solid #2F80FF;
}

.border-active {
  background: #fff8f7;
  border-color: #f74437;
}
</style>
